<template>
  <div class="">
    <van-overlay
      :show="value"
    />
      <div class="hc-msgbox hc-message-box" :class="{'hc-padding0':!(showCancelButton||showConfirmButton),'hc-isToast': !isToast}" v-show="value">
        <div class="hc-message">
          <div>
            <div v-show="!!title" v-html="title" class="hc-message-title"></div>
            <div class="hc-message-content" v-show="needIcon">
              <span class="hc-message-content-icon" :class="iconType == 'ok' ? 'hc-message-content-icon-ok' : 'hc-message-content-icon-err' "></span>
            </div><div class="hc-message-content" v-html="message"></div>
          </div>
          <div v-show="needClose" class="hc-message-close" @click="handleAction('close')">
            <span class="iconfont my-icon-baseline-close-px"></span>
          </div>
        </div>
        <div v-if="isToast" class="hc-message-btn">
          <button v-if="showCancelButton" :style="{color: !needClose?'':'#77CEB8'}" class="hc-btn-cancel" @click="handleAction('cancel')">{{cancelButtonText}}</button>
          <button v-if="showConfirmButton" :style="{color: showCancelButton?'':'#77CEB8'}" @click="handleAction('confirm')">{{confirmButtonText}}</button>
        </div>
      </div>
  </div>
</template>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.hc-isToast {
  height: px2rem(90) !important;
  width: px2rem(220) !important;
  min-height: px2rem(90) !important;
  min-width: px2rem(220) !important;
}
.hc-msgbox {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  background-color: #fff;
  width: 85%;
  border-radius: 3px;
  font-size: 16px;
  -webkit-user-select: none;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: .2s;
  transition: .2s;
}
.hc-padding0 {
  padding: 0px !important;
}
.hc-message-box {
  border-radius: 3px;
  min-height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding-bottom: 58px;
  position: fixed;
  z-index: 100;
}
.hc-message {
  height: 100%;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0 5px !important;
  text-align: center;
}
.hc-message-title {
  font-size: px2rem(16) !important;
  color: #FF5D00;
}
.hc-message .hc-message-icon {
  font-size: 30px;
  vertical-align: middle;
  margin-right: 10px;
}
.hc-message-content {
  display: inline-block;
  vertical-align: middle;
  font-size: px2rem(14) !important;
  .hc-message-content-icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background-image: url('');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    &.hc-message-content-icon-err {
      background-image: url('') !important;
    }
  }
}
.hc-message div {
  font-size: 16px;
  vertical-align: middle;
}
.hc-message-close {
  position: absolute;
  padding: 8px;
  right: 0px;
  top: 0px;
  .iconfont {
    font-size: px2rem(18);
    color: #7A7A7A;
  }
}
.hc-message-btn {
  height: 58px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
  width: 100%;
  display: flex;
  border-top: 1px solid #cccccc;
}
.hc-message-btn button {
  line-height: 58px;
  border: none;
  background: none;
  width: 49%;
  font-size: px2rem(16);
  position: relative;
  flex: 1;
  color: #77CEB8;
}
.hc-message-btn button:focus {
  border: none;
  box-shadow: none;
  outline: 0;
}
.hc-message-btn button:first-child {
  color: #808080;

}
.hc-btn-cancel::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 40px;
  right: -2px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  background-color: #cccccc;
  position: absolute;
}

</style>

<script type="text/babel">
  export default {
    props: {
      messageIcon: {
        type: String,
        default: ''
      },
      modal: {
        default: true
      },
    },

    data() {
      return {
        message: '',
        title: '账号未激活',
        showConfirmButton: true,
        showCancelButton: false,
        confirmButtonText: '',
        cancelButtonText: '',
        needClose: false,
        value: false,
        needIcon: true,
        iconType: 'ok'
      };
    },

    computed: {
      isToast() {
        return this.showCancelButton||this.showConfirmButton;
      }
    },

    methods: {
      doClose() {
        this.value = false;
        this._closing = true;
        this.onClose && this.onClose();
        var that = this
        setTimeout(() => {
          if (that.modal && that.bodyOverflow !== 'hidden') {
            document.body.style.overflow = that.bodyOverflow;
            document.body.style.paddingRight = that.bodyPaddingRight;
          }
          that.bodyOverflow = null;
          that.bodyPaddingRight = null;
        }, 200);
        this.opened = false;

        if (!this.transition) {
          this.doAfterClose();
        }
      },
      handleAction(action) {
        var callback = this.callback;
        this.value = false;
        callback(action);
      },

    },

  };
</script>
